<template>
  <div>
    <!-- 影院基本信息 -->
    <div class="info">
      <span @click="back()"> &lt; </span>
      <div>
        <p>{{ info.name }}</p>
        <!-- 小标识 -->
        <div class="tags">
          <van-tag
            plain
            type="danger"
            class="tag"
            color="#ffb232"
            size="small"
            v-for="(item, index) in info.services"
            :key="index"
            >{{ item.name }}</van-tag
          >
        </div>
      </div>
      <!-- 地址 -->
      <div class="address">
        {{ info.address }}
      </div>
    </div>
    <!-- 影院排片 -->
    <div class="lunbo">
      <div class="bg"></div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in cinemaImg"
            :key="index"
            class="swiper-slide"
            @click="getI(index)"
          >
            <img :src="item" alt="" />
          </div>
        </div>
      </div>
      <!-- 影片信息 -->
      <div>电影名{{ FilmsArr[0].name }}</div>
      <!-- <p>{{ FilmsArr.name }}</p> -->
    </div>
    <!-- 影片场次 -->
  </div>
</template>

<script>
import api from '@/api'
import Vue from 'vue'
import { Tag } from 'vant'
import Swiper from 'swiper'
import 'swiper/swiper.min.css'

Vue.use(Tag)
export default {
  data() {
    return {
      // 影院基本信息
      info: [],
      // 影院排片
      FilmsArr: [
        {
          name: ''
        }
      ],
      // FilmSchedules: [],
      filmId: [],
      // 电影轮播图大图的单独数组
      cinemaImg: [],
      cDetail: {},
      changci: []
    }
  },
  methods: {
    back() {
      this.$router.back()
    },
    getI(index) {
      const id = this.$route.query.id
      //  this.cDetail是单独的影院详情信息
      this.cDetail = this.FilmsArr[index]
      // 获取当前点击的影院的id
      this.filmId = this.cDetail.filmId
      // // 发送影片场次
      this.$http
        .get(api.getFS + '?cinemaId=' + id + '&filmId=' + this.filmId)
        .then((res) => {
          // console.log(res)
          this.changci = res.data.schedules
          // this.FilmsArr = res.data.films
          console.log('场次', this.FilmsArr)
        })
    }
  },
  filters: {},
  created() {
    this.$store.commit('hide')
    // 获取传过来的影院id
    const id = this.$route.query.id
    // 发送请求影院基本信息
    this.$http.get(api.getCI + '?cinemaId=' + id).then((res) => {
      this.info = res.data.cinema
      // console.log(this.info)
    })
    // 发送影院排片
    this.$http.get(api.getPaiPian + '?cinemaId=' + id).then((res) => {
      this.FilmsArr = res.data.films
      // this.filmId = res.data.films.filmId
      // console.log(res.data)
      // 循环遍历电影的数据，把图择处理
      // 得到了一个全是电影大图的数组
      this.cinemaImg = res.data.films.map((item) => {
        return item.poster
      })
      this.cDetail = this.FilmsArr[0]
      console.log(this.cDetail)
      // 获取影片的影片场次
      // console.log(this.cDetail)
      this.filmId = this.cDetail.filmId
      this.$http
        .get(api.getFS + '?cinemaId=' + id + '&filmId=' + this.filmId)
        .then((res) => {
          // console.log(res)
          this.changci = res.data.schedules
        })
    })
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 40,
      centeredSlides: true,
      loop: true,
      effect: 'coverflow',
      // observer 修改swiper子元素时自动初始化swiper
      observer: true,
      // observeParents 包括当前父元素的swiper发生变更时也会初始化swiper
      observeParents: true
    })
    console.log(swiper)
  },
  beforeDestroy() {
    this.$store.commit('show')
  }
}
</script>

<style scoped lang='scss'>
.info {
  box-sizing: border-box;
  height: 44px;
  background-color: #fff;
  span {
    box-sizing: border-box;
    display: block;
    width: 100%;
    font-size: 20px;
    padding-left: 10px;
    padding-top: 5px;
    line-height: 34px;
  }
  p {
    box-sizing: border-box;
    text-align: center;
    font-size: 17px;
    color: #191a1b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    background: #fff;
    height: 33px;
    line-height: 33px;
  }
  .tags {
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #ffb232;
    overflow: hidden;
    position: relative;
    .tag {
      position: relative;
      margin: 0 2.5px;
      font-size: 10px;
      text-align: center;
      min-width: 15px;
      padding: 0;
      padding-left: 2px;
      line-height: 20px;
    }
  }
  .address {
    height: 44px;
    text-align: center;
    line-height: 44px;
  }
}
.lunbo {
  position: relative;
  top: 170px;
  width: 100%;
  .bg {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: rgb(5, 5, 5);
    height: 130px;
    width: 100%;
    overflow: hidden;
    filter: blur(30px);
    z-index: -1;
  }
}
.swiper-container {
  width: 100%;
  height: 100%;
  height: 170px;
  overflow: hidden;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
  img {
    width: 100px;
    height: 100%;
  }
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>
